<template>
    <div>
        <v-progress-linear v-if="loading" indeterminate ></v-progress-linear>
        <v-app-bar app elevation="0" dense color="white">
            <v-btn icon @click="$router.go(-1)">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-toolbar-title class="text-center flex-grow-1 subtitle-1">{{appTitle}}</v-toolbar-title>

            <v-btn plain text :ripple="false" @click="filterData">
                <v-icon small>mdi-filter-cog-outline</v-icon>
                筛选
            </v-btn>
        </v-app-bar>

        <v-bottom-sheet v-model="filterSheet" persistent>
            <v-sheet height="85vh" class="overflow-y-auto rounded-xl rounded-b-0">
                <v-app-bar elevation="0" dense color="white">
                    <v-btn icon @click="filterSheet = false">
                        <v-icon>mdi-close</v-icon>
                    </v-btn>
                    <v-toolbar-title class="text-center flex-grow-1 subtitle-1">筛选</v-toolbar-title>
                    <v-btn plain text :ripple="false" @click="filter">
                        完成
                    </v-btn>
                </v-app-bar>

                <div class="px-4 py-2">
                    <v-row dense no-gutters>
                        <v-col cols="12" class="font-weight-bold subtitle-2">
                            地区
                        </v-col>
                        <v-col cols="12">
                             <v-chip class="grey lighten-4"
                                @click="provinceDialog=true"
                                v-if="provinceSelected.length == 0 && citySelected.length == 0">
                                请选择
                            </v-chip>
                             <v-chip class="filter-active primary--text"
                                v-else
                                close
                                @click="provinceDialog=true"
                                @click:close="clearAera">
                                <span v-if="provinceSelected.length > 0">
                                    {{provinceSelectedName}}
                                </span>
                                <span v-if="citySelected.length > 0" class="ml-1">
                                    {{citySelectedName}}
                                </span>
                            </v-chip>
                        </v-col>
                    </v-row>
                    <v-row dense no-gutters class="mt-1">
                        <v-col cols="12" class="font-weight-bold subtitle-2">
                            贷款类别
                        </v-col>
                        <v-col cols="12">
                            <v-chip-group
                                column
                                v-model="cate"
                                active-class="filter-active primary--text"
                            >
                                <v-chip class="grey lighten-4" value="credit-provident">精准公积金</v-chip>
                                <v-chip class="grey lighten-4" value="mortgage-car">精准车</v-chip>
                                <v-chip class="grey lighten-4" value="mortgage-house">精准房</v-chip>
                                <v-chip class="grey lighten-4" value="mortgage-tax">精准企业主</v-chip>
                                <v-chip class="grey lighten-4" value="has_gongjijin">普通公积金</v-chip>
                                <v-chip class="grey lighten-4" value="has_car">普通车</v-chip>
                                <v-chip class="grey lighten-4" value="has_house">普通房</v-chip>
                                <v-chip class="grey lighten-4" value="yingyezhizhao">普通企业主</v-chip>
                            </v-chip-group>
                        </v-col>
                    </v-row>
                    <v-row dense no-gutters class="mt-1">
                        <v-col cols="12" class="font-weight-bold subtitle-2">
                            贷款金额
                        </v-col>
                        <v-col cols="12">
                            <v-chip-group
                                column
                                v-model="amount_range"
                                active-class="filter-active primary--text"
                            >
                                <v-chip class="grey lighten-4" value="0-10">0-10万</v-chip>
                                <v-chip class="grey lighten-4" value="10-20">10万-20万</v-chip>
                                <v-chip class="grey lighten-4" value="30-50">20万-50万</v-chip>
                                <v-chip class="grey lighten-4" value="50-100">50万-100万</v-chip>
                                <v-chip class="grey lighten-4" value="100-1000">100万-1000万</v-chip>
                            </v-chip-group>
                        </v-col>
                    </v-row>
                </div>
            </v-sheet>
        </v-bottom-sheet>

         <v-dialog
            fullscreen
            transition="slide-x-transition-reverse"
            v-model="provinceDialog"
            class="province-city"
        >
            <v-card>
                <v-toolbar dense style="opacity:0;visibility:hidden;"></v-toolbar>
                <v-toolbar flat tile color="grey lighten-4"
                    dense
                    class="province-city"
                    style="position:fixed;"
                >
                    <v-btn icon  @click="provinceDialog = false" >
                        <v-icon>mdi-close</v-icon>
                    </v-btn>
                    <v-toolbar-title class="text-center flex-grow-1 subtitle-1">{{provinceSelectedName}}</v-toolbar-title>
                    <v-toolbar-items>
                        <v-btn plain  @click="provinceDialog = false">
                            完成
                        </v-btn>
                    </v-toolbar-items>
                </v-toolbar>
                <v-list-item-group
                    v-model="provinceSelected"
                    @change="cityDialog = true ; citySelected = ''"
                >
                    <v-list-item
                        v-for="(name, k)  in provinceList"
                        :key="k"
                        :value="k"
                    >
                    <v-list-item-content>
                        <v-list-item-title>{{name}}</v-list-item-title>
                    </v-list-item-content>
                    </v-list-item>
                </v-list-item-group>
            </v-card>
        </v-dialog>

         <v-dialog
            fullscreen
            transition="slide-x-transition-reverse"
            v-model="cityDialog"
            class="province-city"
        >
            <v-card>
                <v-toolbar dense style="opacity:0;visibility:hidden;"></v-toolbar>
                <v-toolbar flat tile color="grey lighten-4"
                    dense
                    class="province-city"
                    style="position:fixed;"
                >
                    <v-btn icon  @click="cityDialog = false" >
                        <v-icon>mdi-chevron-left</v-icon>
                    </v-btn>
                    <v-toolbar-title class="text-center flex-grow-1 subtitle-1">{{provinceSelectedName}}</v-toolbar-title>
                    <v-toolbar-items>
                        <v-btn plain  @click="cityDialog = false ; provinceDialog = false">
                            完成
                        </v-btn>
                    </v-toolbar-items>
                </v-toolbar>
                <v-list-item-group
                    v-model="citySelected"
                >
                    <v-list-item
                        v-for="(city, k)  in cityList"
                        :key="k"
                        :value="city.code"
                    >
                    <v-list-item-content>
                        <v-list-item-title>{{city.name}}</v-list-item-title>
                    </v-list-item-content>
                    </v-list-item>
                </v-list-item-group>
            </v-card>
        </v-dialog>

        <v-container>
            <v-card elevation="0" class="mb-2 pa-4 text--primary" v-for="item of items" :key="item.id" :to="uid > 0 ? `/loan/${item.id}` : `/login`">
                <v-row dense class="align-center" no-gutters>
                    <v-col cols="12">
                        <span class="font-weight-bold subtitle-1">{{item.name}}</span>
                        <span class="ml-2 primary--text text-caption">{{item.category_type}}</span>
                    </v-col>
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">征信情况2: </span> <span class="font-weight-regular">一般</span>-->
<!--                    </v-col>-->
                     <v-col cols="12" >
                        <span>{{item.apply_at ? item.apply_at.substring(0, 10).replaceAll("-", "/") : ''}}</span>
                    </v-col>
                    <v-col cols="12">
                        <span class="text--secondary">订单编号: </span>
                        {{item.number}}
                    </v-col>
                    <v-col cols="12">
                        <span class="text--secondary">贷款金额: </span>
                        <span class="primary--text font-weight-bold subtitle-2" v-if="item.amount_start == item.amount_end">{{item.amount_start_zh}}</span>
                        <span class="primary--text font-weight-bold subtitle-2" v-else>{{item.amount_start_zh}}-{{item.amount_end_zh}}</span>
                        元
                    </v-col>
                    <v-col cols="12">
                        <span class="text--secondary">抢单需要: </span>
                        <span class="primary--text font-weight-bold subtitle-2">{{item.need_ticket}}</span>
                        金币
                    </v-col>
                    <v-col cols="6" class="d-flex align-center">
                        <v-icon small>mdi-map-marker</v-icon> {{item.province}} {{item.city}}
                    </v-col>
                    <v-col cols="6" class="text-right">
                        <v-btn depressed small rounded color="primary">一键抢单</v-btn>
                    </v-col>
                </v-row>
            </v-card>

             <v-row dense v-if="items.length > 0">
                <v-col cols="12"  v-intersect="loadMore" v-if="!finished">
                    <v-btn :ripple="false" plain text block @click="loadMore" :loading="loading">加载更多</v-btn>
                </v-col>
                <v-col cols="12" v-else>
                    <v-btn disabled plain text block>没有更多数据了...</v-btn>
                </v-col>
            </v-row>
            <v-row dense v-else-if="!loading">
                <v-col cols="12">
                    <v-btn disabled plain text block>暂无数据...</v-btn>
                </v-col>
            </v-row>
        </v-container>
    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from 'vuex';
import { areaList } from '@vant/area-data';
import { encode, decode } from 'js-base64';

export default {
    data: () => ({
        loading: false,
        items: [],
        pageNo: 1,
        pageSize: 10,
        finished: false,
        cate: '',
        amount_range: '',
        filterSheet: false,
        provinceList: areaList.province_list,
        provinceDialog: false,
        provinceSelected: '',
        cityDialog: false,
        citySelected: ''
    }),
    computed: {
        provinceSelectedName() {
            if (this.provinceSelected == '') return '';

            return this.provinceList[this.provinceSelected] ? this.provinceList[this.provinceSelected] : ''
        },
        citySelectedName() {
            if (this.citySelected == '') return '';

            return areaList.city_list[this.citySelected] ? areaList.city_list[this.citySelected] : ''
        },
        cityList() {
            if(this.provinceSelected.length == 0) return [];

            const list = Object.keys(areaList.city_list).map((code) => ({
                code,
                name: areaList.city_list[code],
            }));

            const code = this.provinceSelected.slice(0, 2);
            return list.filter(
                (item) => item.code.indexOf(code) === 0
            );
        },
        appTitle() {
            if (this.cate == 'general') return '银行综合贷款';
            if (this.cate == 'credit-provident') return '公积金信用贷';
            if (this.cate == 'mortgage-car') return '车辆抵押贷';
            if (this.cate == 'mortgage-house') return '房屋抵押贷';
            if (this.cate == 'mortgage-tax') return '企业税贷';

            return "贷款申请";
        },
        ...mapGetters([
            'uid'
        ]),
    },
    created() {
        this.cate = this.$route.query.cate;
        this.load();
    },
    beforeRouteUpdate(to, from, next) {
        next();
        this.reset();
        this.cate = to.query.cate;
        this.amount_range = '';
        this.load();
    },
    methods: {
        filterData(){
            const that = this;
            that.loading = true;
            axios.get(`/v1/loan_application/checkStatus` ).then((response) => {
                if (response.data.code == 200) {
                    this.filterSheet = true
                } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                }
            })
                .catch(function () {})
                .then(function () {
                    that.loading = false;
                });
        },
        reset() {
            this.items = [];
            this.pageNo = 1;
            this.finished = false;
        },
        clearAera() {
            this.provinceSelected = '';
            this.citySelected = '';
        },
        filter() {
            this.reset();
            const params = Object.entries({
                pageSize: this.pageSize,
                page: this.pageNo,
                province: encode(this.provinceSelectedName),
                city: encode(this.citySelectedName),
                amount_range: this.amount_range
            }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});
            localStorage.setItem('savedFilters', JSON.stringify(params));
            this.load();
            this.filterSheet = false;
        },
        load() {
            let params = null;
            const savedFilters = localStorage.getItem('savedFilters');
            if (savedFilters) {
                params = JSON.parse(savedFilters);
            }else {
                params = Object.entries({
                    pageSize: this.pageSize,
                    page: this.pageNo,
                    province: encode(this.provinceSelectedName),
                    city: encode(this.citySelectedName),
                    amount_range: this.amount_range
                }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});
            }
            if(this.cate){
                params.category = this.cate
            }
            const that = this;
            that.loading = true;
            axios.get(`/v1/loan`,{ params: params} ).then((response) => {
                if (response.data.code == 0) {
                    that.items = that.items.concat(response.data.data.items);
                    if (response.data.data.items.length < that.pageSize) {
                        that.finished = true;
                    }
                } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                }
            })
            .catch(function () {})
            .then(function () {
                 that.loading = false;
            });
        },
        loadMore() {
            this.pageNo++;
            this.load();
        },
    }
};
</script>

<style lang="scss">
.filter-active {
    background-color: #F5DEE1;
}

.province-city {
    top:0;
    left:0;
    right:0;
    z-index: 1;

    .v-toolbar__content {
        z-index: 1;
    }
}


</style>

